{% block css %}
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  <style type="text/css">
    {% include "style.css" %}
  </style>
{% endblock %}

{% block javascript %}
  <script type="text/javascript">
    var existingPVCs = {{ existing_pvcs|tojson }};
    var formDefaults = {{ form_defaults|tojson }};
    var username = {{ username|tojson }};
    {% include "script.js" %}
  </script>
{% endblock %}

{% block existing_pvcs %}
  {% if form_defaults is not none %}
    <datalist id="suggest_pvcs">
      {% for pvc in existing_pvcs %}
        <option value="{{ pvc.name }}">
      {% endfor %}
    </datalist>
  {% endif %}
{% endblock %}

{% block error_message %}
  {% if form_defaults is none %}
    <div style="display: inline-block; text-align: left;padding: 10px;">
      <h3>The <code>config.yaml</code> file contains invalid YAML syntax</h3>
      <h4>Please follow the steps below to address this issue:</h4>
      <p class="help-block">
        1. Correct all YAML syntax errors in the <code>config.yaml</code> file<br>
        2. Ask your administrator to restart the JupyterHub server<br>
        3. Return at this page and log in to view the Spawner form
      </p>
    </div>
  {% endif %}
{% endblock %}

{% block header %}
  {% if form_defaults is not none %}
    <div class="panel-info">
      <div class="panel-heading">Fill out the form to customize your Jupyter Notebook.</div>
    </div>
  {% endif %}
{% endblock %}

{% block image %}
  {% if form_defaults is not none %}
    <!-- Image -->
    <div class="panel panel-primary">
      <div class="panel-heading">
        <i class="fab fa-docker"></i>
        <label>Image</label>
      </div>
      <div class="panel-body" style="padding: 10px;">
        <div id='imageType' style="padding-bottom: 5px;">
          <label class="radio-inline">
            <input id="option_standard" type="radio" name="imageType" onclick="setImageType()"
                   value="standard" checked>Standard
          </label>
          <label class="radio-inline">
            <input id="option_custom" type="radio" name="imageType" onclick="setImageType()"
                   value="custom">Custom
          </label>
        </div>
        <select class="form-control" for="standardImages" required></select>
        <input class="form-control" for="customImage" placeholder="repo/image:tag" required>
      </div>
      <p class="text-muted" style="padding: 10px;">
        A starter Docker image for JupyterHub with a baseline deployment and typical ML packages.
      </p>
    </div>
    {% endif %}
{% endblock %}

{% block toggle_advanced_button %}
  {% if form_defaults is not none %}
    <!-- Advanced Options Toggle Button -->
    <div style="text-align: center; padding: 10px;">
      <a id="toggle_advanced_options" class="btn btn-primary">Toggle Advanced</a>
    </div>
  {% endif %}
{% endblock %}

{% block advanced_fields %}
  {% if form_defaults is not none %}
    <div id="advanced_fields" style="display: none;">
      {% block cpu %}
        <!-- CPU -->
        <div class="panel panel-primary">
          <div class="panel-heading">
            <i class="fas fa-microchip"></i>
            <label>CPU</label>
          </div>
          <div class="panel-body" style="padding: 10px;">
            <input class="form-control" id='cpu' name='cpu'
                   placeholder='200m, 2.5, etc' required>
            </input>
          </div>
          <p class="text-muted" style="padding: 10px;">
            For CPU-intensive workloads, you can choose more than 1 CPU
            (e.g. <span><code>1.5</code></span>).
          </p>
        </div>
      {% endblock %}

      {% block memory %}
        <!-- Memory -->
        <div class="panel panel-primary">
          <div class="panel-heading">
            <i class="fas fa-memory"></i>
            <label>Memory</label>
          </div>
          <div class="panel-body" style="padding: 10px;">
            <input class="form-control" id='memory' name='memory'
                   placeholder='100Mi, 1.5Gi, etc' required>
            </input>
          </div>
          <p class="text-muted" style="padding: 10px;">
            Specify the total amount of RAM reserved by your Notebook
            (e.g. <span><code>2.0Gi</code></span>).
          </p>
        </div>
      {% endblock %}

      {% block workspaceVolume %}
        <!-- Workspace Volume -->
        <div class="panel panel-primary">
          <div class="panel-heading">
            <i class="fas fa-laptop-code" style="padding: 0px 2px;"></i>
            <label>Workspace Volume</label>
          </div>
          <div class="panel-body" id="workspace_volume">
              <div class="col-sm-2" style="width: 14%"><label>Type</label></div>
              <div class="col-sm-3" style="width: 20%"><label>Name</label></div>
              <div class="col-sm-2" style="width: 12%"><label>Size (Gi)</label></div>
              <div class="col-sm-3" style="width: 29%"><label>Mount Path</label></div>
              <div class="col-sm-3" style="width: 19%"><label>Access Mode</label></div>
              <div class="col-sm-*">
              <div class="col-sm-2" style="width: 14%">
                <select class="form-control" name="ws_type" id="ws_type">
                  <option selected>New</option>
                  <option>Existing</option>
                </select>
              </div>
              <div class="col-sm-3" style="width: 20%">
                <input class="form-control" name="ws_name" id="ws_name"
                       list="suggest_pvcs_disabled" required>
                </input>
              </div>
              <div class="col-sm-2" style="width: 12%">
                <input class="form-control" name="ws_size" id="ws_size" placeholder='10'
                       type="number" step="0.5" min="0" required>
                </input>
              </div>
              <div class="col-sm-3" style="width: 29%">
                <input class="form-control" id="ws_mount_path" name="ws_mount_path" required></input>
              </div>
              <div class="col-sm-3" style="width: 19%">
                <select class="form-control" id="ws_access_modes" name="ws_access_modes" required>
                  <option value="ReadWriteOnce">ReadWriteOnce</option>
                  <option value="ReadWriteMany">ReadWriteMany</option>
                  <option value="ReadOnlyMany">ReadOnlyMany</option>
                </select>
              </div>
            </div>
          </div>
          <p class="text-muted" style="padding: 10px;">
            Configure the Volume to be mounted as your personal Workspace.</br>
            For example, to create an empty Workspace:
            <span><code>New</code></span>
            <span><code>{{ username }}-workspace</code></span>,
            <span><code>10</code></span>,
            <span><code>/home/jovyan</code></span>,
            <span><code>ReadWriteOnce</code></span>
          </p>
        </div>
      {% endblock %}

      {% block dataVolumes %}
        <!-- Data Volumes -->
        <div class="panel panel-primary">
          <div class="panel-heading">
            <i class="far fa-hdd" style="padding: 0px 2px;"></i>
            <label>Data Volumes</label>
          </div>
          <div class="panel-body">
            <div class="col-sm-2" style="width: 14%"><label>Type</label></div>
            <div class="col-sm-3" style="width: 20%"><label>Name</label></div>
            <div class="col-sm-2" style="width: 12%"><label>Size (Gi)</label></div>
            <div class="col-sm-3" style="width: 29%"><label>Mount Path</label> </div>
            <div class="col-sm-3" style="width: 19%"><label>Access Mode</label></div>
            <div class="col-sm-*" id="data_volumes"></div>
            <div class="col-sm-2">
              <button id="add_volume" class="btn btn-success btn-sm" type="button" onclick="addVolume();">
                <i class="fas fa-plus"></i>
              </button>
            </div>
          </div>
          <p class="text-muted" style="padding: 10px;">
            Configure the Volumes to be mounted as your Datasets.</br>
            For example, to create an empty Data Volume:
            <span><code>New</code></span>,
            <span><code>{{ username }}-volume-1</code></span>,
            <span><code>5</code></span>,
            <span><code>/home/jovyan/{{ username }}-volume-1</code></span>,
            <span><code>ReadWriteOnce</code></span>
          </p>
        </div>
      {% endblock %}

      {% block extra_resources %}
        <!-- Extra Resources -->
        <div class="panel panel-primary">
          <div class="panel-heading">
            <i class="fas fa-cogs"></i>
            <label>Extra Resources</label>
          </div>
          <div class="panel-body" style="padding: 10px;">
            {% raw %}
            <input class="form-control" id="extraResources" name='extraResources' placeholder='{"nvidia.com/gpu": 3}' required></input>
            {% endraw %}
          </div>
          <p class="text-muted" style="padding: 10px;">
            Reserve additional resources.</br>
            For example, to reserve 2 GPUs: <span><code>{"nvidia.com/gpu": 2}</code></span>
          </p>
        </div>
      {% endblock %}
    </div>
  {% endif %}
{% endblock %}

{% block footer %}
  {% if form_defaults is not none %}
    <div class="panel-warning">
      <div class="panel-heading">
        In case your Jupyter Notebook does not start, make sure that the resource quotas you specified are available in the cluster.
      </div>
    </div>
  {% endif %}
{% endblock %}
